<template>
	<view class='login'>
		 <u-toast ref="uToast"></u-toast>
		<view>
			<u-navbar :autoBack="true" bgColor='rgba(245,245,245,0.39)'></u-navbar>
		</view>
		<view class='login-main'>
			<view class='login-img'>
				<image src="../../static/logo.png" mode=""></image>
				<text>手机号登录</text>
			</view>
			<view class="login-text">首次登录手机号将在验证后生成新账号</view>
			<view v-if='isCheck'>
				<view class='login-phone'>
					<input type="tel" placeholder="请输入手机号" v-model="phone">
				</view>
				<view class='login-code'>
					<button @click="code" :disabled="isBtn" :class='isBtn?"active":""'>发送短信验证码</button>
				</view>
			</view>
			<view v-else>
				<view class='login-user'>
					<input type="text" placeholder="用户名" v-model='user.name'>
				</view>
				<view class='login-user'>
					<input type="password" placeholder="密码" v-model='user.pwd'>
				</view>
				<view class='login-code'>
					<button @click='login'>登录</button>
				</view>
			</view>
			<view class="login-pwd" @click='loginUser'>
				{{ isCheck ? '用户名和密码登录' : '手机号登录'}}
			</view>
			<view class='login-msg'>
				<u-checkbox-group @change='checkBtn'>
					<u-checkbox shape="circle"></u-checkbox>
					<view class='msg-text'>
						我已阅读并同意 <text>服务条款</text> 和 <text>隐私政策</text>
					</view>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	import { loginByJson } from '../../api/login.js'
	import { Encrypt } from '../../utils/aes.js'
	import { mapMutations } from 'vuex'
	export default{
	    data () {
	        return {
	            phone:'',
	            isBtn:true,
	            check:0,
	            isCheck:true,
	            user:{
	                name:'',
	                pwd:''
	            }
	        }
	    },
	    methods:{
			 ...mapMutations(['setToken']),
	        code(){
	            if( this.check ){
	                uni.navigateTo({
	                    url:`/pages/login/code?tel=${this.phone}`
	                })
	            }else{
	                uni.showToast({
	                    title:'请查看服务条款和隐私协议',
	                    icon:'error'
	                })
	            }
	        },
	        checkBtn( e ){
	            this.check = e.length;
	        },
	        loginUser(){
	            this.isCheck = !this.isCheck;
	        },
	        login(){
				if( this.check ){
				this.$refs.uToast.show({
				    message:'正在登录中...',
				    type:'loading',
				    duration:5000
				})	
	            loginByJson({
	                username:Encrypt(this.user.name),
	                password:Encrypt(this.user.pwd)
	            }).then(res=>{    
					//设置Token
					this.setToken(res.accessToken)
	                //返回我的页面
	                uni.switchTab({
	                    url:'/pages/tabs/me'
	                })
	            })
				}else{
					uni.showToast({
					    title:'请查看服务条款和隐私协议',
					    icon:'error'
					})
				}
	        }
	    },
	    watch:{
	        phone( newVal,oldVal ){
	            let reg = /^1[23456789]\d{9}$/;
	            this.isBtn = !reg.test( newVal );
	        }
	    }
	}
</script>

<style>
	.login {
		display: flex;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: rgba(245, 245, 245, 0.39);
	}

	.login-main {
		flex: 1;
		margin: 0 58rpx;
	}

	.login-img {
		display: flex;
		align-items: center;
	}

	.login-img image {
		width: 83rpx;
		height: 83rpx;
	}

	.login-img text {
		padding-left: 22rpx;
		font-size: 56rpx;
		font-weight: bold;
		color: #343234;
	}

	.login-text {
		padding-top: 45rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
		opacity: 0.53;
	}

	.login-phone {
		padding-top: 121rpx;
		padding-bottom: 31rpx;
		border-bottom: 2rpx solid #707070;
	}

	.login-user {
		padding: 24rpx 0;
		border-bottom: 2rpx solid #707070;
	}

	.login-code {
		padding-top: 88rpx;
	}

	.login-code button {
		width: 100%;
		line-height: 100rpx;
		font-size: 33rpx;
		font-weight: bold;
		color: #FFFFFF;
		letter-spacing: 8rpx;
		opacity: 1;
		background-color: #337AFF;
	}

	.login-code button.active {
		background-color: #ccc;
	}

	.login-pwd {
		display: flex;
		justify-content: flex-end;
		padding-top: 18rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
	}

	.login-msg {
		padding-top: 68rpx;
	}

	/deep/ .u-checkbox-group {
		justify-content: center;
		align-items: center;
	}

	.msg-text {
		font-size: 24rpx;
		font-weight: 400;
		color: #343234;
		letter-spacing: 2rpx;
	}

	.msg-text text {
		color: #0077FF;
	}
</style>